<template>
  <view class="content" :style="{ paddingTop: CustomBar + 'px' }">
    <view
      class="contain_tab flex-row justify-center items-center"
      :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }"
    >
      <view class="flex justify-center items-center w100 tabbar">
        <image
          src="/static/arrow_left.svg"
          mode="widthFix"
          class="share"
		  @tap="goBack"
        ></image>
        <text class="store_name c_f">拼团列表</text>
      </view>
    </view>
    <view class="bgred">
      <view class="menu flex flex-row justify-between items-center">
        <swiper class="swiper" circular 
			>
			<swiper-item v-for="(item, index) in bannerLst" :key="index">
				<img class="swiper-item" :src="item.image" alt="">
			</swiper-item>
		</swiper>
      </view>
    </view>
    <view class="miaosha-user" v-if="avatarList.length > 0">
      <view class="miaosha-user-avatar" :style="{width: (avatarList.length + 2) * 35 + 'rpx'}">
        <img class="miaosha-user-avatar-item" :src="item" :style="{'zIndex': index+ 1, 'left': (index + 1) * 35 + 'rpx'}" v-for="(item, index) in avatarList" :key="index" >
        <view class="miaosha-user-avatar-mask" v-if="avatarList.length ==8">
        <img style="width: 30rpx;height: 30rpx" src="/static/dian.png" alt=""></view>
      </view> 
      <view class="miaosha-user-amount">{{assistUserCount}}人参与</view>
    </view>
    <view class="good">
      <view class="good-item"  v-for="(item, index) in combinationList"  @tap="goDetail(item)"
          :key="index">
       	 <image class="good-item-left" :src="item.image" />
		 <view class="good-item-right">
			<view class="good-item-right-1">{{item.title}}</view>
			<view class="good-item-right-2">
        <view class="good-item-right-w-price">￥{{item.otPrice}}</view> 库存:{{item.stock}}
      </view>
			<view class="good-item-right-3">
				<view class="good-item-right-3-1"><text style="font-size: 26rpx">¥</text>{{item.price}}</view>
				<view class="good-item-right-3-2" v-if="item.stock > 0">
					<view class="good-item-right-3-2-1">{{item.people}}人团</view>
					<view class="good-item-right-3-2-2">去拼团</view>
				</view>
				<view class="good-item-right-3-2-3" v-else>已售罄</view>
			</view>
			
		 </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
		getCombinationList,
		combinationHeaderApi
	} from '@/api/activity.js';
export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      storeIndex: 0,
	  active: 0,
	  limit: 100,
	  page: 1,
	  loading: false,
				loadend: false,
				combinationList: [
	  ],
    bannerList: [],
    	avatarList: [],
      assistUserCount: 0,
	  dataList: [
	  ],
    };
  },
  onReachBottom: function() {
			this.getCombinationList();
		},
  onShow() {
      this.getCombinationList();
			this.getCombinationHeader();
  },

  methods: {
	goBack: function() {
				uni.navigateBack();
			},
			goDetail: function(item) {
        uni.navigateTo({
        	url: `/subpageC/combination_detail/combination_detail?id=${item.id}`,
          fail:function(err){
            console.log(err)
          }
        });
			},
			getCombinationHeader: function() {
				combinationHeaderApi().then(res => {
					this.avatarList = res.data.avatarList || [];
					this.bannerList = res.data.bannerList || [];
					// this.totalPeople = res.data.totalPeople;
				}).catch(() => {
					this.loading = false;
				})
			},
			getCombinationList: function() {
				var that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loadTitle = '';
				var data = {
					page: that.page,
					limit: that.limit
				};
				this.loading = true
				getCombinationList(data).then(function(res) {
					let list = res.data.list;
					let combinationList = that.$util.SplitArray(list, that.combinationList);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.$set(that, 'combinationList', combinationList);
					that.$set(that, 'page', that.page + 1);
				}).catch(() => {
					that.loading = false;
				})
			},
  },
};
</script>

<style lang="scss">
.miaosha-user {
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      &-avatar {
        position: relative;
        height: 50rpx;
        &-item {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          position: absolute;
          top: 0;
        }
        &-mask {
          top: 0;
          right: 0;
          z-index: 6;
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          position: absolute;
          background: rgba(0, 0, 0, .6);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      &-amount {
        color: #000;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        margin-left: 10rpx;
      }
    }
.swiper {
	width: 100%;
	height: 300rpx;
	&-item {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
}
.seckillList {
		padding: 25rpx;
	}

	.seckillList .priceTag {
		width: 75rpx;
		height: 70rpx;
	}

	.seckillList .priceTag image {
		width: 100%;
		height: 100%;
	}

	.timeLsit {
		width: 596rpx;
		white-space: nowrap;
	}

	.timeLsit .item {
		display: inline-block;
		font-size: 20rpx;
		color: #666;
		text-align: center;
		box-sizing: border-box;
		margin: 0 10rpx;
		width: 120rpx;
	}

	.timeLsit .item .time {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.timeLsit .item.on .time {
		color: #df4b43;
	}

	.timeLsit .item.on .state {
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 15rpx;
		width: 128rpx;
		background: linear-gradient(90deg, #FF783E 1.9%, #ED2B00 98.1%);
		color: #fff;
	}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contain_tab {
  position: fixed;
  z-index: 99;
  background-color: #df4b43;
  width: 100%;
  left: 0;
  top: 0;
  .tabbar {
    width: 100%;
    position: relative;
    .share {
      position: absolute;
      width: 24rpx;
      height: 48rpx;
      left: 0;
      padding: 0 20rpx;
    }
  }
}
.bgred {
  padding: 30rpx 0;
  padding-bottom: 0;
}
.w50 {
  width: 50%;
  color: #fff;
}
.good {
  width: 710rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 24rpx;
  border: 1px solid #eee;
 
  &-item {
    width: 690rpx;
    padding: 24rpx;
    display: flex;
	&-left {
		width: 220rpx;
		height: 220rpx;
	}
	&-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 100%;
		margin-left: 12rpx;
		&-1 {
			color: #1D2129;
			font-family: PingFang SC;
			font-size: 30rpx;
			font-style: normal;
			font-weight: 500;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 2;
		}
		&-2 {
			font-size: 24rpx;
			color: #999;
			font-weight: normal;
      &-price {
			  text-decoration: line-through;
      }
		}
		&-3 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-1 {
				font-family: PingFang SC;
				font-size: 30rpx;
				font-style: normal;
				font-weight: 500;
				color: #df4b43;
			}
			&-2 {
				display: flex;
				align-items:center;
				&-1 {
					width: auto;
					height: 58rpx;
					line-height: 58rpx;
					background-color:#FFEFDB;
					padding-left: 22rpx;
					padding-right: 36rpx;
					color: red;
					font-size: 24rpx;
					-webkit-border-top-left-radius: 15px;
					-webkit-border-bottom-left-radius: 15px;
				}
				&-2 {
					width: 130rpx;
					height: 58rpx;
					z-index: 11;
					background: url(../../static/shandian.png) no-repeat;
					background-size: 100% 100%;
					line-height: 58rpx;
					font-size: 24rpx;
					padding-left: 36rpx;
					padding-right: 10rpx;
					color: #fff;
					margin-left: -28rpx;
				}
				&-3 {
					width: 148rpx;
					height: 58rpx;
					text-align: center;
					line-height: 58rpx;
					background: #CCCCCC;
					opacity: 1;
					color: #FFFFFF;
					border-radius: 30rpx;
					font-size: 24rpx;
				}
			}
		}
	}
  }
}
.menu {
  width: 710rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-left: 20rpx;
  flex-direction: column;
  &-bottom {
    height: 130rpx;
    width: 100%;
    display: flex;
    &-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      &-1 {
        font-family: PingFang SC;
        font-size: 38rpx;
        font-style: normal;
        font-weight: 500;
        color: #000;
      }
      &-2 {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }
  &-top {
    display: flex;
    align-items: center;
    height: 184rpx;
    padding: 32rpx;
    border-bottom: 1px solid #efefef;
    width: 100%;
    &-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 20rpx;
    }
    &-mid {
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      flex: 1;
      &-1 {
        color: rgba(0, 0, 0, 0.8);
        font-family: PingFang SC;
        font-size: 38rpx;
        font-style: normal;
        font-weight: 500;
      }
      &-2 {
        display: flex;
        align-items: center;
        &-img {
          width: 30rpx;
          height: 30rpx;
        }
        &-txt {
          color: #df4b43;
          font-family: PingFang SC;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
    &-right {
      border-radius: 50px;
      background: #df4b43;
      height: 68rpx;
      padding: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &-img {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
      &-txt {
        font-family: PingFang SC;
        font-size: 26rpx;
        font-style: normal;
        font-weight: 500;
        color: #fff;
      }
    }
  }
}
</style>
